<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
    <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="/plugins/swiper/css/swiper.css">
    <link rel="stylesheet" href="/css/index.css">
    <script src="/plugins/jquery/jquery-3.4.0.min.js"></script>
    <script src="/plugins/swiper/js/swiper.min.js"></script>
    <script src="/plugins/bootstrap/js/bootstrap.js"></script>
    <script src="/plugins/bootstrapPager.js"></script>
</head>

<body>
    <!-- 导航栏 -->
    <% include header %>

        <!-- 网站内容模块 -->
        <div class="container-w main">
            <div class="left">
                <!-- 网站轮播图 -->
                <div class="banner">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <%banners.forEach(function(banner){%>
                                <div class="swiper-slide">
                                    <a href="/admin/banner/<%=banner.linkUrl%>"><img src="<%=banner.imgUrl%><%=banner.imgName%>" alt=""></a>
                                </div>
                                <%})%>


                        </div>
                        <!-- 如果需要分页器 -->
                        <div class="swiper-pagination"></div>

                        <!-- 如果需要导航按钮 -->
                        <div class="swiper-button-prev"></div>
                        <div class="swiper-button-next"></div>
                    </div>
                </div>

                <!-- 文章分类 -->
                <div class="artical">
                    <div class="fenlei">
                        <ul>
                            <%types.forEach(function(type){%>
                                <li>
                                    <a href="javascript:void(0)">
                                        <%=type.className%>
                                    </a>
                                </li>
                                <%})%>
                        </ul>
                    </div>
                    <!-- 文章列表 -->
                    <div class="content">
                        <div class="list">
                            <%articals.forEach(function(artical){%>
                                <a href="/detail/<%= artical.articalId%>">
                                    <h3>
                                        <%=artical.articalName%>
                                    </h3>

                                    <div class="bottom">
                                        <span><%=artical.updateTime%></span>
                                        <span><%=artical.userName%></span>
                                    </div>
                                </a>
                                <%})%>

                        </div>








                        <!-- 分页菜单 -->
                        <div class="pagebox">
                        </div>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="sendArtical">
                    <a href="/create">发布文章</a>
                </div>
                <div class="newsList">
                    <h3>最新文章</h3>
                    <ul>
                        <li><a href="#">阿里云前端技术周刊第八期</a></li>
                        <li><a href="#">实现一个前端路由，如何实现浏览器的前进与后退 ？</a></li>
                        <li><a href="#">JavaScript 中数组方法 reduce 的妙用之处</a></li>
                        <li><a href="#">IIFE为什么不会污染全局变量</a></li>
                        <li><a href="#">如何实现一个下载进度条/播放进度条</a></li>
                    </ul>
                </div>
                <div class="ganggao">
                </div>

                <div class="msg">
                    <h3>联系我们</h3>
                    <P>手机号:18888888</P>
                    <P>QQ:9494985729</P>
                    <P>微信:wx8d8d8d8</P>
                </div>
            </div>
        </div>



        <!-- 页面底部 -->
        <div class="footer">
            <div class="container-w">
                <div class="footer-left">
                    <p>初心教育专注于从事互联网IT教育培训,致力于培养高质量互联网行业中高端技术人才,目前开设高级前端全栈学科,java全栈应用学科培养工作中能够快速开发项目能力.</p>
                    <p>公司地址: 武汉市江夏区关南园一路当代光谷梦工厂2栋</p>
                </div>
                <div class="footer-right">
                    <div class="phton">
                        <p>联系电话:188888888</p>
                        <p>微信:wx18888888</p>
                        <img src="/images/ewm.jpg" alt="">
                    </div>
                </div>
            </div>

        </div>


        <script src="/js/index.js"></script>
        <script>
            $(function() {
                $('.fenlei ul li ').eq(0).addClass('active');
                $('.fenlei ul li ').click(function() {
                    $(this).addClass('active').siblings().removeClass('active')
                })
            })
        </script>
</body>

</html>